<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="header-content">
          <h1>NEUSOFT  PE体检管理系统</h1>
          <div class="doctor-info">
            <el-icon><User /></el-icon>
            <span>医生：{{docter.realName}}</span>
          </div>
        </div>
      </el-header>
      <el-container class="main-container">
        <el-aside width="320px">
          <div class="search-panel">
            <div class="panel-header">
              <el-icon><Search /></el-icon>
              <h4>体检用户查询</h4>
            </div>

            <el-form :model="form" label-width="85px" class="search-form">
              <el-form-item label="手机号码">
                <el-input 
                  v-model="form.userId" 
                  placeholder="请输入手机号码"
                  prefix-icon="Phone" 
                />
              </el-form-item>
              <el-form-item label="姓名">
                <el-input 
                  v-model="form.realName" 
                  placeholder="请输入姓名"
                  prefix-icon="User" 
                />
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="form.sex">
                  <el-radio label="0">女</el-radio>
                  <el-radio label="1">男</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="套餐类型">
                <el-select 
                  v-model="form.smId" 
                  placeholder="请选择套餐类型"
                  class="full-width">
                  <el-option
                    v-for="item in setmeal"
                    :key="item.smId"
                    :label="item.name"
                    :value="item.smId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="体检日期">
                <el-date-picker
                  v-model="form.orderDate"
                  type="date"
                  placeholder="请选择日期"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item label="是否归档">
                <el-radio-group v-model="form.state">
                  <el-radio label="2">未归档</el-radio>
                  <el-radio label="3">已归档</el-radio>
                </el-radio-group>
              </el-form-item>

              <div class="form-buttons">
                <el-button type="primary" @click="onSubmit(1)">
                  <el-icon><Search /></el-icon>
                  查询
                </el-button>
                <el-button @click="resetForm">
                  <el-icon><Refresh /></el-icon>
                  重置
                </el-button>
              </div>
            </el-form>
          </div>
        </el-aside>
        <el-main>
          <div class="table-container">
            <el-table 
              :data="ordersResponseDto.list" 
              style="width: 100%"
              :header-cell-style="{ background: '#f5f7fa' }"
              border>
              <el-table-column fixed prop="orderId" label="预约编号" width="115" />
              <el-table-column prop="userId" label="手机号码" width="120" />
              <el-table-column prop="realName" label="真实姓名" width="90" />
              <el-table-column prop="sex" label="性别" width="80">
                <template #default="scope">
                  <el-tag :type="scope.row.sex == 1 ? 'primary' : 'success'" size="small">
                    {{scope.row.sex==1?"男":"女"}}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="smName" label="体检套餐类型" width="120" />
              <el-table-column prop="hpName" label="体检医院" width="180" />
              <el-table-column prop="orderDate" label="体检日期" width="120">
                <template #default="scope">
                  {{scope.row.orderDate.substring(0,10)}}
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="140">
                <template #default="scope">
                  <el-button
                    :type="scope.row.state==2 ? 'primary' : 'info'"
                    size="small"
                    @click="handleClick(scope.row)"
                  >
                    {{scope.row.state==2?"编辑体检报告":"查看体检报告"}}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              background
              layout="prev, pager, next, total"
              class="pagination"
              :total="ordersResponseDto.totalRow"
              :page-size="ordersResponseDto.maxPageNum"
              @current-change="currentChange"
            />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>





<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import { getSessionStorage } from "../common";

export default {
  setup() {
    const router = useRouter();

    const state = reactive({
      form: {
        userId: "",
        realName: "",
        orderDate: "",
        sex: "1",
        state: "2",
        smId: "",
        pageNum:"1",
        maxPageNum:"6"
      },
      ordersResponseDto:{},
      docter: getSessionStorage("docter"),
      setmeal:[]
    });

    function onSubmit(pageNum) {
      console.log("当前page页为"+pageNum)
      state.form.pageNum = pageNum
      console.log("表单page页为"+state.form.pageNum)
      console.log("onSubmit................");
      axios.post('/api/queryOrderPage',state.form)
      .then(function (response){
          state.ordersResponseDto = response.data.data
          console.log(state.ordersResponseDto)
        })
      .catch(function (error) {
          console.log(error);
      })
      // router.push("/ordersList")
    }

    function handleClick(row){
      console.log(row)
      axios.post('/api/createReportTemplate',{
          orderId: row.orderId,
          smId: row.smId
      })
      .then(function (response){
        console.log(row.orderId)
        console.log(response)
        router.push({name:"OrderContent",query:{user:JSON.stringify(row)}})
      })
      .catch(function (error) {
          console.log(error);
      })
    }

    loadSetmeals()
    function loadSetmeals(){
      axios.post('/api/getSetmeals')
      .then(function (response){
        console.log(response.data.data)
        state.setmeal = response.data.data
      })
      .catch(function (error) {
          console.log(error);
      })
    }

    function currentChange(pageNum){
      onSubmit(pageNum)
    }

    return {
      ...toRefs(state),
      onSubmit,
      handleClick,
      currentChange,
      loadSetmeals
    };
  },
};
</script>

<style scoped>
.common-layout {
  height: 100vh;
  background: linear-gradient(135deg, #f6f8fc 0%, #e9f0f7 100%);
}

.el-header {
  background: linear-gradient(to right, #ffffff, #f8faff);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  height: 60px !important;
  border-bottom: 1px solid rgba(64, 158, 255, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 100%;
}

.header-content h1 {
  font-size: 22px;
  font-weight: 600;
  background: linear-gradient(120deg, #5e35b1, #7e57c2);

  -webkit-text-fill-color: transparent;
  margin: 0;
}

.doctor-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7e57c2;
  font-size: 14px;
  padding: 8px 16px;
  background: rgba(126, 87, 194, 0.1);
  border-radius: 20px;
}

.doctor-info .el-icon {
  color: #7e57c2;
}

.main-container {
  height: calc(100vh - 60px);
}

.el-aside {
  background: linear-gradient(180deg, #f8f5ff 0%, #f1ebff 100%);
  border-right: 1px solid rgba(126, 87, 194, 0.1);
  padding: 24px;
  width: 320px !important;
  transition: all 0.3s ease;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.05);
}

.search-panel {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(126, 87, 194, 0.08);
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 16px 20px;
  background: linear-gradient(120deg, #7e57c2, #9575cd);
  color: white;
}

.panel-header h4 {
  font-size: 18px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.panel-header .el-icon {
  font-size: 20px;
  color: white;
}

.search-form {
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
}

.form-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(126, 87, 194, 0.1);
}

.el-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.el-button--primary {
  background: linear-gradient(135deg, #7e57c2, #673ab7);
  border: none;
}

.el-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(126, 87, 194, 0.3);
  background: linear-gradient(135deg, #9575cd, #7e57c2);
}

.el-button--default {
  background: white;
  border: 1px solid #dcdfe6;
}

.el-button--default:hover {
  background: #f8f5ff;
  border-color: #7e57c2;
  color: #7e57c2;
}

.table-container {
  background: rgba(255, 255, 255, 0.9);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
}

.el-table {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

:deep(.el-input__inner) {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

:deep(.el-input__inner):hover {
  border-color: #7e57c2;
}

:deep(.el-input__inner):focus {
  border-color: #7e57c2;
  box-shadow: 0 0 0 2px rgba(126, 87, 194, 0.1);
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-radio__label) {
  color: #606266;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
  border-color: #7e57c2;
  background: #7e57c2;
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #7e57c2;
}

:deep(.el-select .el-input.is-focus .el-input__inner) {
  border-color: #7e57c2;
}

:deep(.el-select-dropdown__item.selected) {
  color: #7e57c2;
}

:deep(.el-date-picker__header-label.active),
:deep(.el-date-picker__header-label:hover) {
  color: #7e57c2;
}

:deep(.el-date-table td.current:not(.disabled) .el-date-table-cell__text) {
  background-color: #7e57c2;
}

:deep(.el-date-table td.today .el-date-table-cell__text) {
  color: #7e57c2;
}

.full-width {
  width: 100%;
}

/* 滚动条美化 */
.el-aside::-webkit-scrollbar {
  width: 6px;
}

.el-aside::-webkit-scrollbar-thumb {
  background: rgba(126, 87, 194, 0.2);
  border-radius: 3px;
}

.el-aside::-webkit-scrollbar-thumb:hover {
  background: rgba(126, 87, 194, 0.4);
}

.el-aside::-webkit-scrollbar-track {
  background: #f5f7fa;
}

/* 表格内容居中 */
:deep(.el-table .cell) {
  text-align: center;
}

/* 表格hover效果 */
:deep(.el-table tbody tr:hover > td) {
  background-color: #f5f7fa;
}

/* 表单项悬停效果 */
:deep(.el-form-item:hover .el-form-item__label) {
  color: #7e57c2;
}

/* 添加卡片悬停效果 */
.search-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(126, 87, 194, 0.12);
}

/* 表格容器悬停效果 */
.table-container:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
</style>

